<template>
    <div class="VCard" ref="cardRef">
        <div class="VCard-left">
            <div class="VCard-dot" :style="getdotStyle()">
                <div class="VCard-dot-line" :style="{ height: cardContentHeight + 'px' }">

                </div>
            </div>
        </div>
        <div class="title">

            <SvgIcon class="svg-back" v-if="back" iconClass="back" @click="goBack"></SvgIcon>
            {{ title }}
        </div>
        <div class="VCard-content">
            <slot></slot>
        </div>
    </div>
</template>

<script>
import router from '@/router';
export default {
    name: "VCard",
    props: {
        title: {
            type: String,
            default: '标题'
        },
        back: {
            type: Boolean,
            default: false
        },
        formData: {
            type: Object,
            default: {}
        }
    },
    data() {
        return {
            cardContentHeight: 0, // 用于存储目标元素的高度  
        };
    },
    methods: {
        getdotStyle() {
            if (this.formData.status === 2) {
                return { backgroundColor: 'red' }
            } else {
                return { backgroundColor: '#67c23a' }
            }

        },
        calculateHeight() {
            // 获取目标元素  
            const element = this.$refs.cardRef;
            console.log(this.$refs)
            // 计算高度（包括内边距和外边距，但注意：外边距不影响元素本身的高度，只影响布局）  
            // 这里我们只计算元素的总高度（内容高度+内边距+边框，但不包括外边距）  
            this.cardContentHeight = element.offsetHeight + element.offsetTop

            // 如果确实需要包括外边距在内的某种“视觉高度”，你可能需要手动加上外边距  
            // 但这通常不是元素高度的标准计算方式  
            // 例如：this.targetElementHeight += parseInt(getComputedStyle(element).marginTop, 10) + parseInt(getComputedStyle(element).marginBottom, 10);  
        },
        goBack() {
            router.go(-1)
        }
    },
    watch: {

    },
    mounted() {
        this.calculateHeight();
    },
}
</script>

<style lang="scss" scoped>
.VCard {
    padding-bottom: 20px;
    padding-top: 20px;
    padding-left: 60px;
    position: relative;
    overflow: hidden;

    .VCard-left {
        position: absolute;
        left: 0;
        top: 20px;

        .VCard-dot {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: red;
            margin-right: 20px;
            position: relative;
        }

        .VCard-dot-line {
            position: absolute;
            margin-top: 50px;
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            height: 100%;
            background-color: $menuActiveText;
        }
    }

    .VCard-content {
        // margin-left: 100px !important;
        margin-top: 20px;
    }


    .title {
        font-weight: 700;
        font-size: 20px;
        line-height: 1.5;
        margin-bottom: 10px;
        color: rgba(0, 0, 0, 0.85);
        display: flex;
        align-items: center;



        .svg-back {
            cursor: pointer;
        }
    }

}
</style>
